<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statisticItems" :key="index">
        <el-card shadow="hover">
          <el-statistic :title="item.title" :value="item.value" :precision="item.precision || 0" />
        </el-card>
      </el-col>
    </el-row>

    <div class="content-container" style="margin-top: 20px">
      <el-card shadow="hover" header="系统概览">
        <p>这是一个使用defineOptions的Dashboard示例</p>
        <p>展示了如何在script setup中定义路由配置</p>
        <p>包含了子路由配置示例</p>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  // 使用defineOptions定义组件选项，包括路由配置
  defineOptions({
    name: 'DashboardOptions',
    // 路由配置 - 自定义vue-route-options插件会将此处配置转换为<route>标签
    route: {
      name: 'DashboardOptions',
      path: '/dashboard-options',
      meta: {
        title: 'defineOptions示例',
        icon: 'dashboard',
        layout: 'pc-default',
        // 排序号，数字越小越靠前
        orderNo: 2,
        // 是否需要缓存
        noCache: false,
        // 是否在菜单中显示
        hideMenu: false,
        // 是否固定在标签栏
        affix: false,
        // 用于控制权限
        roles: ['admin', 'user'],
        // 菜单权限标识
        permissions: ['dashboard:view'],
      },
      // 是否总是显示根路由
      alwaysShow: true,
      // 子路由配置
      children: [
        {
          path: 'settings',
          name: 'DashboardSettings',
          meta: {
            title: '设置',
            icon: 'setting',
          },
        },
        {
          path: 'profile',
          name: 'DashboardProfile',
          meta: {
            title: '个人资料',
            icon: 'user',
          },
        },
      ],
    },
  });

  const statisticItems = ref([
    { title: '访问数', value: 3456 },
    { title: '用户数', value: 2345 },
    { title: '订单数', value: 6789 },
    { title: '收入', value: 98765, precision: 2 },
  ]);
</script>

<style scoped lang="scss">
  .dashboard-container {
    padding: 20px;

    .content-container {
      border-radius: 4px;
      background-color: #fff;
    }
  }
</style>
